<!-- 系统设置页面 -->
<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)

const settings = reactive({
  siteName: '权限管理系统',
  siteDescription: '基于Vue3的权限管理系统',
  enableRegistration: true,
  enableEmailNotification: false,
  sessionTimeout: 30,
  maxLoginAttempts: 5
})

const handleSave = async () => {
  loading.value = true
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败')
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <div class="settings">
    <div class="settings-card">
      <div class="card-header">
        <h3>系统设置</h3>
      </div>
      
      <el-form :model="settings" label-width="150px">
        <el-form-item label="网站名称">
          <el-input v-model="settings.siteName" />
        </el-form-item>
        
        <el-form-item label="网站描述">
          <el-input v-model="settings.siteDescription" type="textarea" rows="3" />
        </el-form-item>
        
        <el-form-item label="允许注册">
          <el-switch v-model="settings.enableRegistration" />
        </el-form-item>
        
        <el-form-item label="邮件通知">
          <el-switch v-model="settings.enableEmailNotification" />
        </el-form-item>
        
        <el-form-item label="会话超时(分钟)">
          <el-input-number v-model="settings.sessionTimeout" :min="5" :max="120" />
        </el-form-item>
        
        <el-form-item label="最大登录尝试次数">
          <el-input-number v-model="settings.maxLoginAttempts" :min="3" :max="10" />
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" @click="handleSave" :loading="loading">
            保存设置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<style scoped>
.settings {
  padding: 24px;
  display: flex;
  justify-content: center;
}

.settings-card {
  background: white;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
}

.card-header {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eee;
  text-align: center;
}

.card-header h3 {
  margin: 0;
  font-size: 24px;
  color: #333;
}
</style>